<template>
    <div id="main2" :style="{ width: widthProp, height: heightProp }" style="margin-top: 10px;"></div>
</template>
  
<script>
export default {
    props: {
        widthProp: {
            type: String,
            default: "100%",
        },
        heightProp: {
            type: String,
            default: "",
        },
        data: {
            type: Array,
            default: [],
        }
    },
    data() {
        return {
            total: '123,224'
        }
    },
    mounted() {
        this.drawChart2();
    },
    methods: {
        drawChart2() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main2对应
            let myChart = this.$echarts.init(document.getElementById("main2"));
            var option = {
                title: {
                    text: '主题分数对比'
                },
                legend: {
                    data: ['2022年度', '2021年度']
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '环境', max: 6500 },
                        { name: '社会', max: 16000 },
                        { name: '公司治理', max: 30000 },
                        { name: 'SDG', max: 38000 },
                        { name: 'SASB', max: 52000 },
                    ]
                },
                series: [
                    {
                        name: '2022年度 vs 2021年度',
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000],
                                name: '2022年度'
                            },
                            {
                                value: [5000, 14000, 28000, 26000, 42000],
                                name: '2021年度'
                            }
                        ]
                    }
                ]
            };

            myChart.setOption(option);
        },
    },
};
</script>
  
<style></style>